<template>
  <!-- 告警推送 -->
  <div class="JointInspection-report">
    <div class="JointInspection-report-partone borderStyle relative">
      <div class="title">告警选择</div>
      <div class="content mediumtablestyle">
        <el-table :data="data" :row-class-name="tableRowClassName" style="width: 100%">
          <el-table-column prop="GJSJ" label="告警时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="BDZMC" label="所属变电站" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="GJNR" label="告警内容" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="JointInspection-report-partthree borderStyle relative">
      <div class="title">工单内容</div>
      <div class="content mediumtablestyle">
        <el-input type="textarea" v-model="gdnr"></el-input>
      </div>
    </div>
    <div class="JointInspection-report-parttwo borderStyle relative">
      <div class="title">终端选择</div>
      <div class="content mediumtablestyle">
        <el-table
        border
          :data="newTableData2"
          @selection-change="handleSelectionChange2"
          :row-class-name="tableRowClassName"
          style="width: 100%"
        >
         <el-table-column type="selection"></el-table-column>
          <el-table-column prop="myIndex" width="60" label="序号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ssbzMc" label="班组" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="loginName" label="姓名" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ydzdbh" label="终端编号" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="self-pagination elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pages2.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages2.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages2.totalSize"
        ></el-pagination>
      </div>
    </div>
    <div class="JointInspection-report-parttwo borderStyle relative">
      <div class="title">短信选择</div>
      <div class="content mediumtablestyle">
        <el-table
        border
          :data="dxData"
          @selection-change="handleSelectionChange3"
          :row-class-name="tableRowClassName"
          style="width: 100%"
        >
         <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" width="60" label="序号" :show-overflow-tooltip="true"></el-table-column>
          <!-- <el-table-column prop="ssbzMc" label="班组" :show-overflow-tooltip="true"></el-table-column> -->
          <el-table-column prop="NAME" label="姓名" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="VALUE" label="手机号" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <!-- <div class="self-pagination elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pages2.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages2.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages2.totalSize"
        ></el-pagination>
      </div>-->
    </div>
    <div class="JointInspection-report-btn">
      <el-button class="table-query" type="primary" @click="pushInfo">推送</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import qs from "qs";
import { Component, Vue, Prop } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
//basicInfo 基本信息   abnormal异常巡检信息
// import { basicInfo, abnormal } from "./reportcom/index";

@Component({ components: {} })
export default class extends Vue {
  @Prop()
  Manipulation: any;
  @Prop()
  data;
  gdnr = "";
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  /********************************** 终端选择 *************************************/
  // 勾选的消息
  tableSelect2 = [];
  // 表格选择事件
  handleSelectionChange2(val: any): void {
    this.tableSelect2 = val;
  }
  // 勾选的消息
  tableSelect3 = [];
  // 表格选择事件
  handleSelectionChange3(val: any): void {
    console.log(val);
    this.tableSelect3 = val;
  }
  //分页数据事件相关
  pages2: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange2(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages2.pageSize = val;
    this.pages2.page = 1;
    this.queryAuxRealtimeList2();
  }
  // 分页事件
  handleCurrentChange2(val: any) {
    this.pages2.page = val;
    this.queryAuxRealtimeList2();
  }
  //table表格相关事件数据
  tableData2 = [
    // {
    //   SSDSMC: "11",
    //   BDZMC: "22",
    //   DYDJMC: "33",
    //   JHKSSJ: "44",
    //   STATUS: "55",
    //   SFQX: "66",
    // },
  ];
  get newTableData2() {
    let tableData = this.tableData2;
    return tableData;
  }
  // 查询终端选择表格数据
  queryAuxRealtimeList2() {
    let data = this.data[0] || {};
    let form = {
      bdzid: data.BDZID,
      size: this.pages2.pageSize, // 每页多少条
      page: this.pages2.page, // 第几页
    };
    // console.log("form:",form);
    (this as any).$services
      .getYdzd({ data: form, method: "get" })
      .then((result: any) => {
        let data = result.data || {};
        this.pages2.totalSize = data.total || 0;
        let records = data.records || [];
        console.log(records);
          let page = this.pages2.page;
      let size = this.pages2.pageSize;
        this.tableData2 = records.map((v,i) => {
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  pushInfo() {
    if (!this.gdnr) {
      this.$message({
        type: "warning",
        message: "请输入工单内容！",
      });
      return false;
    }
    Promise.all([this.fszd(), this.fsdx()])
      .then((result: any) => {
        this.$emit("saveend");
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 推送终端
  fszd() {
    let tableSelect2 = this.tableSelect2;
    let length = tableSelect2.length;
    if (length != 1) {
      // this.$message({
      //   type: "warning",
      //   message: "请选择一条移动终端进行推送",
      // });
      return false;
    }
    let zd = tableSelect2[0];
    let data = this.data[0] || {};
    let params = {
      bdzid: data.BDZID,
      bdzmc: data.BDZMC,
      bjsj: data.GJSJ,
      gdnr: this.gdnr,
      gjnr: data.GJNR,
      ydzdbh: zd.ydzdbh,
      xsdwbh: data.DWID,
      gjdj: data.GJDJ,
      tjtpUrl: data.GLTX_URL,
      gjly:data.SID
    };
    (this as any).$services
      .insertGjts({ data: params })
      .then((result: any) => {
        let code = result.code;
        let type: any = "warning";
        if (code === 200) {
          type = "success";
        }
        this.$message({
          type,
          message: result.message,
        });
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 推送短信
  fsdx() {
    let tableSelect3 = this.tableSelect3;
    let length = tableSelect3.length;
    let smsAccount = publicAPIModule.smsAccount;
    console.log(smsAccount);
    
    let userinf:any=localStorage.getItem('userinf')
    userinf=JSON.parse(userinf)
    let username=userinf.username
    if (length === 0) {
      // this.$message({
      //   type: "warning",
      //   message: "请选择一条移动终端进行推送",
      // });
      return false;
    }

    let zd = tableSelect3.map(v=>v.VALUE)
    let data = this.data[0] || {};
    let msg=`告警时间:${data.GJSJ},所属变电站:${data.BDZMC},告警内容:${data.GJNR},工单内容:${this.gdnr},报告人:${username}。`
    let params = {
      account: smsAccount.account,
      password: smsAccount.password,
      businessType: "523456",
      msg,
      mobile: zd.join(','),
    };
    let url = `${process.env.VUE_APP_SMSURL}/send/api/sms`;
    axios.post(url, params).then();
  }
  dxData = [];
  getUserPhone() {
    (this as any).$services
      .getUserPhone()
      .then((result: any) => {
        let data = result.data || [];

        this.dxData = data;
        console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    // 请求数据
    this.queryAuxRealtimeList2();
    this.getUserPhone();
  }
}
</script>

<style lang="scss" scoped>
.JointInspection-report {
  width: 100%;
  height: 68vh;
  overflow-y: auto;
  padding-right: 0.2rem;
  .JointInspection-report-partone {
    width: 100%;
    overflow-y: auto;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.1rem;
    .title {
      width: 100%;
      height: 0.3rem;
      // background-color: pink;
      padding-top: 0.08rem;
      padding-left: 0.08rem;
    }
    .content {
      width: 100%;
      margin-bottom: 0.1rem;
    }
    .self-pagination {
      width: 100%;
    }
  }
  .JointInspection-report-parttwo {
    width: 100%;
    overflow-y: auto;
    margin-bottom: 0.1rem;
    // background-color: pink;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 0.3rem;
      // background-color: pink;
      padding-top: 0.08rem;
      padding-left: 0.08rem;
    }
    .content {
      // flex: 1;
      // background-color: plum;
      width: 100%;
      margin-bottom: 0.1rem;
    }
    .self-pagination {
      width: 100%;
      height: 10%;
    }
  }
  .JointInspection-report-partthree {
    width: 100%;
    overflow-y: auto;
    margin-bottom: 0.1rem;
    .title {
      width: 100%;
      height: 0.3rem;
      // background-color: pink;
      padding-top: 0.08rem;
      padding-left: 0.08rem;
    }
    .content {
      // flex: 1;
      // background-color: plum;
      width: 100%;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      margin-bottom: 0.1rem;
    }
    .self-pagination {
      width: 100%;
    }
  }
  .JointInspection-report-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 0.04rem;
  }
}
</style>
<style lang="scss">
.JointInspection-report {
  .el-collapse {
    border: none;
    background: #002279;
    margin-bottom: 0.1rem;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;
  }
}
</style>

